<template>
  <div class="login">
    <div class="login-box">
      <h1>登录系统</h1>
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            class="denglu"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: {
          required: true,
          message: "请输入账号",
          trigger: "blur",
        },
        password: {
          required: true,
          message: "密码不能为空",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    submitForm(ruleForm) {
      console.log(this.$refs[ruleForm]);
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.$axios.get("/login").then((res) => {
            res.forEach((item) => {
              if (item.username === this.ruleForm.username) {
                if (item.password === this.ruleForm.password) {
                  this.$message({
                    type: "success",
                    message: "登录成功",
                  });
                  this.$router.push("/dashboard");
                }else{
                  this.$message({
                  type: "warning",
                  message: "密码错误",
                });
                }
              } else {
                this.$message({
                  type: "warning",
                  message: "没有此账号",
                });
              }
            });
          });
        } 
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: white;
  border-radius: 5px;
  .el-form-item {
    padding: 0 30px;
  }
  h1 {
    display: flex;
    justify-content: center;
    line-height: 80px;
    font-weight: 700;
  }
  .denglu {
    width: 100%;
  }
}
</style>